<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="./include/tag.jsp" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>我是同行者</title>
    <link rel="stylesheet" href="${ctx}/css/ui/about.css">
    <%@include file="./include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/static/jquery.flexslider/flexslider.css"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2izIwlMmDVH737ms8m4Y8uHsoxtEIR65"></script>
</head>
<body style="min-width: 1000px;">
<!--头部-->
<%@include file="./include/header1.jsp" %>
<!--滚动-->
<div class="m-banner">
    <div class="banner-bg">
    </div>
    <div class="flexslider">
        <ul class="slides">
            <%--<c:forEach var="advertise" items="${index.advertises}">--%>
            <%--<li class="slide-item" data-url="${advertise.pic}">--%>
            <%--<img src="${advertise.pic}" alt="">--%>
            <%--</li>--%>
            <%--</c:forEach>--%>
            <li class="slide-item" data-url="${ctx}/image/index/about_banner4.jpg" style="height: 480px;">
                <div style="width: 100%; height: 100%; background: url(${ctx}/image/index/about_banner4.jpg) center;">
                </div>
            </li>
        </ul>
    </div>
</div>
<%@include file="./include/banner.jsp" %>
<div style="width: 100%; height: 0px; box-shadow: 0 0 10px 1px #ccc; margin-bottom: 10px;position: absolute"></div>
<div class="about-btns">
    <ul class="change-about">
        <li class="active" data-info="aboutUs">
            <div>
                <img src="${ctx}/image/about/icon1-active.png" alt="">
                <p>关于我们</p>
            </div>
        </li>
        <li data-info="connect">
            <div>
                <img src="${ctx}/image/about/icon2.png" alt="">
                <p>联系合作</p>
            </div>
        </li>
    </ul>
</div>
<div class="about-bd">
    <div id="aboutUs">
        <div class="g-box ctn-mn wow fadeIn" >
            <img src="${ctx}/image/about/about1.jpg" alt="">
        </div>
        <div class="g-box ctn-mn wow fadeIn" >
            <img src="${ctx}/image/about/about2.jpg" alt="">
        </div>
        <div class="g-box ctn-mn wow fadeIn" >
            <img src="${ctx}/image/about/about3.jpg" alt="">
        </div>
        <div class="g-box ctn-mn wow fadeIn" >
            <img src="${ctx}/image/about/about4.jpg" alt="">
        </div>
    </div>
    <div id="connect">
        <div>
            <div class="env">
                <h1 class="hd-tt">工作环境</h1>
                <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            </div>
            <div class="swiper-box" style="width: 880px;">
                <div class="flexslider carousel img-box">
                    <ul class="slides">
                        <li>
                            <img src="${ctx}/image/about/01.jpg" alt="">
                        </li>
                        <li>
                            <img src="${ctx}/image/about/02.jpg" alt="">
                        </li>
                        <li>
                            <img src="${ctx}/image/about/03.jpg" alt="">
                        </li>
                        <li>
                            <img src="${ctx}/image/about/04.jpg" alt="">
                        </li>
                        <li>
                            <img src="${ctx}/image/about/05.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>

            <%@include file="./include/midBanner.jsp" %>
        </div>
        <div class="env">
            <h1 class="hd-tt">联系方式</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="f18">携手同行者，共同挖掘社群商业红利</p>
        </div>
        <div class="connect-box">
            <img src="${ctx}/image/about/connect.png" alt="">
            <p>诚邀加盟，携手共赢</p>
            <div>4008-771-663</div>
        </div>
        <div class="env">
            <h1 class="hd-tt">联系我们</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
            <p class="f18">公司地址：深圳市南山区粤海街道软件产业基地5栋C座2层3B </p>
        </div>
        <div id="allmap"></div>
    </div>
</div>
</div>
<div id="bottom"></div>
<!--底部-->
<%@include file="./include/footer1.jsp" %>
<script type="text/javascript" src="${ctx}/static/wow/wow.min.js"></script>
<script>
    var headNavIdx = 1
    wow = new WOW(
        {
            animateClass: 'animated',
            offset: 100,
            callback: function (box) {
                console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
            }
        }
    );
    wow.init();
    $('.change-about li').click(function(){
        $('body,html').animate({scrollTop:0},500);
        if ($(this).hasClass('active')){
            return
        }
        $(this).addClass('active').siblings('li').removeClass('active')
        if ($(this).find('img').attr('src').indexOf('active')== -1) {
            $(this).find('img').attr('src', $(this).find('img').attr('src').split('.')[0] + '-active.' + $(this).find('img').attr('src').split('.')[1])
        }
        $(this).siblings('li').find('img').attr('src', $(this).siblings('li').find('img').attr('src').replace('-active', ''))
        var str = '#' + $(this).data('info')
        // $(str).css('visibility', 'visible').siblings('div').css('visibility', 'hidden')
        if (str.indexOf('aboutUs') != -1){
            $('#aboutUs').show()
            $('.about-bd').css({'height': '3695px', 'overflow': 'hidden'})
            $('#connect').css('visibility', 'hidden')
        } else {
            $('#aboutUs').hide()
            $('.about-bd').css({'height': '1350px', 'overflow': 'hidden'})
            $('#connect').css('visibility', 'visible')
        }

    })
    $(document).scroll(function (x) {
        console.log($('#bottom').offset().top - $(this).scrollTop())
        if ($('.m-banner').height() - $(this).scrollTop() < 0) {
            $('.about-btns').find('ul').removeClass('change-about')
            if ($('#bottom').offset().top - $(this).scrollTop() < 230) {
                $('.about-btns').removeClass('top-fix')
                $('.about-bd').css('padding-top', '0')
                $('#shade').css('display', 'none')
            } else {
                $('.about-btns').addClass('top-fix')
                $('.about-bd').css('padding-top', '130px')
                $('#shade').css('display', 'block')
            }
        } else {
            $('.about-btns').removeClass('top-fix')
            $('.about-bd').css('padding-top', '0')
            $('#shade').css('display', 'none')
            $('.about-btns').find('ul').addClass('change-about')
        }
    })
    // 百度地图API功能
    var map = new BMap.Map("allmap", {
        enableMapClick: false
    });

    map.centerAndZoom(new BMap.Point(113.947688, 22.529476), 19);
    map.disableDragging(); //禁止拖拽
    map.clearOverlays(); // 清除标注

    var lng = '113.947398';
    var lat = '22.529571';
    var new_point = new BMap.Point(lng, lat);
    var marker = new BMap.Marker(new_point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中

    openInfo(lng, lat); // 显示标注弹窗信息


    marker.addEventListener("click", function(e) {
        var p = e.target;
        openInfo(p.getPosition().lng, p.getPosition().lat);
    });

    function openInfo(lng, lat) {
        var new_point = new BMap.Point(lng, lat);
        var infoWindow = new BMap.InfoWindow("软件产业基地5栋C座2层3B");
        map.openInfoWindow(infoWindow, new_point);
    }
</script>
</body>
</html>